
<template>
     <Account>
        <template v-slot:header>
            <NavBar :title="$t('account.realNameVerification')"/>
        </template>
        <div class="verification">
            <p class="verification_title">{{$t('account.realNameVerification')}}</p>
            <a-spin v-if="!isLoadEnd" class="verification_loading" size="large" />
            <template v-else>
              <div v-if="realStatus === 3" class="success l-f l-column l-row-c">
              <img class="success_icon" src="@/assets/images/real_success.svg" />
              <p class="success_label">{{$t('account.certificationApproved')}}</p>
            </div>
            <template v-else>
               <div class="verification_form">
                 <a-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                layout="vertical"
                >
                <a-form-item class="l-f1" :label="$t('account.idType')" name="type">
                   <div class="verification_form_select l-f l-row-sb" @click="onOpen">
                    <p class="verification_form_select_label">{{selectList[currentType]}}</p>
                    <img class="verification_form_select_icon" src="@/assets/icons/icon-down_sanjao.svg" />
                   </div>
                </a-form-item>
                <div class="l-f verification_form_group">
                    <a-form-item class="l-f1" :label="$t('account.name')" name="name">
                    <input v-model="formData.name" class="verification_form_input l-f" :disabled="realStatus !== 0" />
                    </a-form-item>
                    <a-form-item class="l-f1" :label="$t('account.idNumber')" name="number">
                    <input v-model="formData.number" class="verification_form_input l-f" :disabled="realStatus !== 0" />
                    </a-form-item>
                </div>
                 <a-form-item class="l-f1" :label="$t('account.upload')">
                     <div class="verification_form_group l-f l-row-c">
                       <a-form-item name="frontImg">
                        <div class="verification_form_upload">
                          <ImageUpload @success="uploadSuccess($event,0)" ref="frontImg" :disabled="realStatus !== 0" :title="$t('account.uploadNumberFront')" />
                        </div>
                      </a-form-item>
                      <a-form-item name="backImg">
                      <div class="verification_form_upload">
                        <ImageUpload @success="uploadSuccess($event,1)" ref="backImg" :disabled="realStatus !== 0" :url="formData.backImg" :title="$t('account.uploadNumberBack')" />
                      </div>
                      </a-form-item>
                     </div>
                 </a-form-item>
                </a-form>
            </div>
            <p class="verification_reason" v-if="remark && realStatus == 1">{{$t('account.rejectReason')}}: {{remark}}</p>
            <a-button v-if="realStatus == 0" @click="onSubmit" class="verification_btn" type="primary">{{
                $t("account.submit")
            }}</a-button>
            <a-button v-if="realStatus == 1" class="verification_btn" style="background: #54a0ff;" type="primary">{{
                $t("account.pendingApproval")
            }}</a-button>
            </template>
            </template>
        </div>
    </Account>

    <a-drawer
    v-if="isMobile"
    v-model:open="isOpen"
    :closable="false"
    :height="380"
    style="background-color: #191934;border-top-left-radius: 20px;border-top-right-radius: 20px;"
    placement="bottom"
  >
    <template #title>
      <div class="l-f l-row-c">
        <div class="popup-line"></div>
      </div>
    </template>
      <LimitOrder @select="limitSelect" />
  </a-drawer>
   <a-modal v-else v-model:open="isOpen" :footer="null">
    <template #closeIcon>
      <img src="@/assets/icons/icon-close.svg" alt="">
    </template>
       <LimitOrder @select="limitSelect" />
    </a-modal>

</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useMainStore } from '@/store'
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router"
import { throttle } from "@/utils/index.js";
import { postRealApi, getRealApi } from '@/api/userApi.js'

import Account from '@/views/account/index.vue'
import NavBar from '@/components/navBar/index.vue'
import ImageUpload from "@/components/imageUpload/index.vue";
import LimitOrder from './components/limitOrder/index.vue'

const mainStore = useMainStore()
const { t } = useI18n();
const router = useRouter()

const isMobile = computed(() => {
  return mainStore.isMobile
})

const frontImg = ref(null)
const backImg = ref(null)
const realStatus = ref(0)
const remark = ref('') // 拒绝原因
const isLoadEnd = ref(false)

const formRef = ref(null);
const formData = reactive({
  type: 0,
  name: "",
  number: "",
  frontImg: "",
  backImg: ""
});

const formRules = {
  name: [{ required: true, message: t("account.pleaseEnterYourName"), trigger: "change" }],
  number: [{ required: true, message: t("account.pleaseNumber"), trigger: "change" }],
  frontImg: [{ required: true, message: t("account.uploadNumberFront"),trigger: "change" }],
  backImg: [{ required: true, message: t("account.uploadNumberBack"), trigger: "change" }],
};

const isOpen = ref(false)
const currentType = ref(0)
const selectList = computed(() => {
    return [t('account.idCard'),t('account.passport'),t('account.driversLicense')]
})

onMounted(() => {
  getRealDetail()
  setTimeout(() => {
    isLoadEnd.value = true
  },5000)
})

const uploadSuccess = (url,type) => {
  switch(type) {
    case 0:
      formData.frontImg = url;
       formRef.value.validateFields(["frontImg"]);
      break;
    case 1:
      formData.backImg = url;
       formRef.value.validateFields(["backImg"]);
      break;
  }
};

// 查询认证结果
const getRealDetail = async() => {
  const res = await getRealApi()
  isLoadEnd.value = true
  realStatus.value = res.advanced_review_status
  if(res.review_status == 2) {
    realStatus.value = 3
    return
  }
  if(res) {
    const realData = res.real_data
    formData.name = realData.name
    formData.number = realData.card_id
    formData.frontImg = realData.front_pic
    formData.backImg = realData.reverse_pic
    formData.type = realData.certificate_type
    remark.value = realData.remark
    setTimeout(() => {
      frontImg.value.setDefaultImg(realData.front_pic)
      backImg.value.setDefaultImg(realData.reverse_pic)
    },500)
  }
}

const onOpen = () => {
  if(realStatus.value !== 0) return
  isOpen.value = true
}

const limitSelect = (index) => {
  currentType.value = index
  isOpen.value = false
}

const onSubmit = throttle(() => {
  formRef.value
    .validate()
    .then(async () => {
      const res = await postRealApi({
          front_pic: formData.frontImg,
          reverse_pic: formData.backImg,
          name: formData.name,
          card_id: formData.number,
          certificate_type: formData.type
      });
      message.success(res);
      getRealDetail()
      // setTimeout(() => {
      //   router.replace("/account");
      // }, 800);
    })
    .catch((error) => {
      console.log("error", error);
    });
}, 3000);

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>